import 'package:bigegg/global/routes/xmm_routes.dart';
import 'package:bigegg/global/user/xmm_account_manager.dart';
import 'package:bigegg/page/main/page/mine/page/xmm_block_list_page.dart';
import 'package:bigegg/page/main/page/mine/page/xmm_my_article_list_page.dart';
import 'package:bigegg/widget/image/xmm_circle_cached_network_image.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../res/xmm_img.dart';
import '../../../../widget/xmm_widget.dart';

class XmmMinePage extends StatefulWidget {
  const XmmMinePage({super.key});

  @override
  State<StatefulWidget> createState() {
    return XmmMinePageState();
  }
}

class XmmMinePageState extends State<XmmMinePage>
    with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
  @override
  bool get wantKeepAlive => true;

  final PageController _controller = PageController(initialPage: 0);

  final List<Widget> _tabPages = [
    const XmmMyArticleListPage(),
    const XmmBlockListPage(),
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: Container(
        decoration: commonBgDecoration(bgImage: "assets/images/xmm_bg_mine.png"),
        child: Column(
          children: [
            SizedBox(height: context.mediaQueryPadding.top),
            topToolsWidget(),
            SizedBox(height: 38.w),
            userHeadWidget(),
            SizedBox(height: 48.w),
            Container(color: const Color(0xFFEEEEEE), height: 1),
            enterPageToolsWidget(),
            Container(color: const Color(0xFFEEEEEE), height: 1),
            SizedBox(height: 32.w),
            tabWidget()
          ],
        ),
      ),
    );
  }

  Widget topToolsWidget() {
    return Row(children: [
      GestureDetector(
        child: Container(
          alignment: Alignment.center,
          height: 32,
          padding: const EdgeInsets.only(left: 7, right: 10),
          margin: const EdgeInsets.only(left: 25),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(16),
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(XmmImg.moneyIcon, width: 25, height: 25),
              const SizedBox(width: 4),
              Obx(
                () => Text(
                  "${XmmAccountManager.instance.user.availableCoins ?? 0}",
                  style: const TextStyle(
                    fontSize: 16,
                    color: Color(0xFF202020),
                  ),
                ),
              ),
            ],
          ),
        ),
        onTap: () => Get.toNamed(XmmRoutes.shoppingCoinPage),
      ),
      const Expanded(child: SizedBox()),
      GestureDetector(
        child: Container(
          alignment: Alignment.center,
          width: 62,
          height: 32,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(16),
          ),
          child: const Text(
            "Edit",
            style: TextStyle(
              fontSize: 16,
              color: Color(0xFF202020),
            ),
          ),
        ),
        onTap: () => Get.toNamed(XmmRoutes.userEditPage),
      ),
      const SizedBox(width: 19),
      GestureDetector(
        onTap: () => XmmRoutes.routeCsPage(),
        child: Container(
          alignment: Alignment.center,
          width: 32,
          height: 32,
          child: Image.asset(XmmImg.csIcon, width: 22, height: 24),
        ),
      ),
      const SizedBox(width: 15),
    ]);
  }

  Widget userHeadWidget() {
    return Obx(
      () => Column(
        children: [
          SizedBox(
            width: 88.w,
            height: 88.w,
            child: XmmCircleCachedNetworkImage(
              imageUrl: XmmAccountManager.instance.user.avatarUrl ?? "",
              borderColor: Colors.white,
              borderWidth: 2,
            ),
          ),
          const SizedBox(height: 12),
          Text(
            XmmAccountManager.instance.user.nickname ?? "",
            style: TextStyle(
              fontSize: 18.sp,
              color: const Color(0xFF404040),
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 8),
          Text(
            "ID：${XmmAccountManager.instance.user.userId}",
            style: TextStyle(
              fontSize: 12.sp,
              color: const Color(0x4D000000),
            ),
          ),
        ],
      ),
    );
  }

  Widget enterPageToolsWidget() {
    return Container(
      alignment: Alignment.center,
      height: 68.w,
      child: Row(children: [
        const Expanded(flex: 1, child: SizedBox()),
        toolsItemWidget(
          "assets/images/xmm_icon_mine_gifts.png",
          "Gifts",
          () => Get.toNamed(XmmRoutes.giftPage),
        ),
        const Expanded(flex: 2, child: SizedBox()),
        toolsItemWidget(
          "assets/images/xmm_icon_mine_about.png",
          "About",
          () => Get.toNamed(XmmRoutes.aboutPage),
        ),
        const Expanded(flex: 2, child: SizedBox()),
        toolsItemWidget(
          "assets/images/xmm_icon_mine_setting.png",
          "Setting",
          () => Get.toNamed(XmmRoutes.settingPage),
        ),
        const Expanded(flex: 1, child: SizedBox()),
      ]),
    );
  }

  Widget toolsItemWidget(
      String image, String text, GestureTapCallback callback) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: callback,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            image,
            width: 20.w,
            height: 20.w,
          ),
          const SizedBox(height: 12),
          Text(
            text,
            style: TextStyle(
              color: const Color(0xFF666666),
              fontSize: 12.sp,
            ),
          )
        ],
      ),
    );
  }

  final _selectIndex = 0.obs;

  Widget tabWidget() {
    return Expanded(
      child: Container(
        color: const Color(0xFFF5F7F6),
        child: Column(
          children: [
            Container(
              padding: const EdgeInsets.only(left: 20, right: 20),
              child: Row(
                children: [
                  Expanded(
                    child: tabItemWidget(
                      "assets/images/xmm_icon_article_def.png",
                      "assets/images/xmm_icon_article_select.png",
                      "Post",
                      0,
                    ),
                  ),
                  Expanded(
                    child: tabItemWidget(
                      "assets/images/xmm_icon_block_def.png",
                      "assets/images/xmm_icon_block_select.png",
                      "Blocked list",
                      1,
                    ),
                  )
                ],
              ),
            ),
            const SizedBox(height: 16),
            Expanded(
              child: PageView(
                controller: _controller,
                //设置不可滑动
                physics: const NeverScrollableScrollPhysics(),
                children: _tabPages,
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget tabItemWidget(
    String defImage,
    String selectImage,
    String text,
    int index,
  ) {
    return SizedBox(
      height: 53.w,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        child: Obx(
          () => Stack(
            alignment: AlignmentDirectional.center,
            children: [
              Row(
                children: [
                  SizedBox(width: 42.w),
                  Image.asset(
                    index == _selectIndex.value ? selectImage : defImage,
                    width: 19.w,
                    height: 18.w,
                  ),
                  const SizedBox(width: 5),
                  Text(
                    text,
                    style: TextStyle(
                      fontSize: 16.sp,
                      color: Color(index == _selectIndex.value
                          ? 0xFF202020
                          : 0xFF999999),
                    ),
                  )
                ],
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  color: Color(
                      index == _selectIndex.value ? 0xFF404040 : 0xFFEEEEEE),
                  height: 1,
                ),
              )
            ],
          ),
        ),
        onTap: () {
          _selectIndex.value = index;
          _controller.jumpToPage(index);
        },
      ),
    );
  }
}
